<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Rain Effect Experiments | Demo 2 | Codrops</title>
	<meta name="description" content="Some WebGL experiments with raindrop effects" />
	<meta name="keywords" content="webgl, raindrops, effect, rain, web, video, background" />
	<meta name="author" content="Lucas Bebber for Codrops" />
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/demo.css" />
	<link rel="stylesheet" type="text/css" href="css/style2.css" />
	<!--[if IE]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
</head>

<body class="demo-2">
	<div class="container">
		<header class="codrops-header">
			<div class="codrops-links">
				<a class="codrops-icon codrops-icon--prev" href="http://tympanus.net/Development/CardStackEffects/" title="Previous Demo"><span>Previous Demo</span></a>
				<a class="codrops-icon codrops-icon--drop" href="http://tympanus.net/codrops/?p=25417" title="Back to the article"><span>Back to the Codrops article</span></a>
			</div>
			<h1>Rain &amp; Water Effects</h1>
			<nav class="codrops-demos">
				<a href="index.html">Weather</a>
				<a class="current-demo" href="index2.html">Water</a>
				<a href="index3.html">Video</a>
			</nav>
			<p class="info">Based on the <a href="https://dribbble.com/shots/2257687-Water-introduction-mobile-Experiment">Dribbble shot</a> by Bilal</p>
		</header>
		<div class="content">
			<img class="device" src="img/iphone.svg" alt="iPhone" />
			<div class="app">
				<canvas id="container" width="261" height="463" style="position:absolute;top:0;left:0;width:100%;height:100%"></canvas>
				<div class="app-content">
					<button class="app__button-menu"><i class="fa fa-navicon"></i></button>
					<h2 class="app__title">water</h2>
					<p class="app__info">The wettest thing on planet Earth.</p>
					<button class="app__button">Learn more</button>
					<p class="app__info app__info--small">I'm not thirsty</p>
				</div>
			</div>
		</div>
		<p class="nosupport">Sorry, but your browser does not support WebGL!</p>
	</div>
	<!-- /container -->
	<script src="js/index2.min.js"></script>
</body>

</html>
